<template>
	<view class="page">
		<!-- loading -->
		<view class="loadingBox" v-if="sign"> 
			<view class="loading">l</view>
			<view class="loading">o</view>
			<view class="loading">a</view>
			<view class="loading">d</view>
			<view class="loading">i</view>
			<view class="loading">n</view>
			<view class="loading">g</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sign: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
			}
		},
		mounted() {
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.loadingBox{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 999999;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
	}
	.loading{
		width: 20rpx;
		height: 30rpx;
		font-size: 22rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 0 12rpx;
		color: transparent;
		border-radius: 7rpx;
		animation: dance 1.2s infinite;
	}
	.loading:nth-child(1){
		background-color: #666cb4;
		box-shadow: 0 0 2px #666cb4;
	}
	.loading:nth-child(2){
		background-color: #61dafb;
		box-shadow: 0 0 2px #61dafb;
		animation-delay: .2s;
	}
	.loading:nth-child(3){
		background-color: #4fc08d;
		box-shadow: 0 0 2px #4fc08d;
		animation-delay: .4s;
	}
	.loading:nth-child(4){
		background-color: #FAB6B6;
		box-shadow: 0 0 2px #FAB6B6;
		animation-delay: .6s;
	}
	.loading:nth-child(5){
		background-color: #45acfa;
		box-shadow: 0 0 2px #45acfa;
		animation-delay: .8s;
	}
	.loading:nth-child(6){
		background-color: #ae22c0;
		box-shadow: 0 0 2px #ae22c0;
		animation-delay: 1s;
	}
	.loading:nth-child(7){
		background-color: #fb9394;
		box-shadow: 0 0 2px #fb9394;
		animation-delay: 1.2s;
	}
	
	
	@keyframes dance {
		50%{
			height: 60rpx;
			/* line-height: 60rpx; */
			color: #fff;
		}
		100%{
			height: 20rpx;
			/* line-height: 30rpx; */
			color: transparent;
		}
	}
</style>
